<template>
  <div>
    <viewer
      v-if="images && images.length"
      ref="viewer"
      :images="images"
      :options="options"
      class="viewer"
      @inited="inited"
    >
      <img v-for="(image, idx) in images" :key="idx" :src="image.thumbnail" :data-source="image.source" class="image" />
    </viewer>
  </div>
</template>

<script>
import 'viewerjs/dist/viewer.css';

export default {
  data() {
    return {
      index: 0,
      images: [],
      options: {
        navbar: false,
        title: false,
        url: 'data-source'
      }
    };
  },
  methods: {
    inited(viewer) {
      this.$viewer = viewer;
      this.$viewer.view(this.index);
    },
    view(index) {
      this.index = index;
      this.$viewer.view(this.index);
    },
    show(images, index = 0) {
      if (this.images === images) {
        this.view(index);
        return;
      }
      this.images = images;
      this.index = index;
    }
  }
};
</script>

<style lang="less" scoped>
.image {
  display: none;
}
</style>
<style>
.viewer-loading > img {
  display: none;
}

.viewer-next,
.viewer-prev,
.viewer-play {
  display: none;
}
</style>
